<template>
    <div class="login_container">
        <el-row>
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms">
                    <h1>Hello</h1>
                    <h2>欢迎使用运营平台</h2>
                    <el-form-item prop="username">
                        <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password"
                            show-password></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="login_btn" :loading="loading" type="primary" size="default"
                            @click="login">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts">
    import { User, Lock } from '@element-plus/icons-vue';
    import { reactive, ref } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { ElNotification } from 'element-plus';
    //引入用户相关小仓库
    import useUserStore from '@/store/modules/user';
    //引入获取当前时间的函数
    import { getTime } from '@/utils/time';

    let userStore = useUserStore();
    let $router = useRouter();
    let $route = useRoute();
    //定义变量控制按钮加载动画
    let loading = ref(false);
    //收集账号与密码数据
    let loginForm = reactive({ username: 'admin', password: '111111' });
    //获取el-form组件
    let loginForms = ref();
    //按钮回调
    const login = async () => {
        //保证全部表单校验通过再发送请求
        await loginForms.value.validate();
        //加载效果：开始加载
        loading.value = true;
        try {
            //保证登录成功
            await userStore.userLogin(loginForm);
            //编程式导航跳转到展示数据首页
            //判断登录时是否有query参数
            let redirect: any = $route.query.redirect;
            $router.push({ path: redirect || '/' });
            //登录成功提示信息
            ElNotification({
                type: 'success',
                message: '登录成功！',
                title: `HI！,${getTime()}好，辛苦了喵~`,
            })
            //登录成功后加载效果消失
            loading.value = false;
        } catch (error) {
            //登录失败加载效果消失
            loading.value = false;
            ElNotification({
                type: 'error',
                message: (error as Error).message,
            })
        }
    }

    //自定义校验规则需要的函数
    const validatorUserName = (rule: any, value: any, callback: any) => {
        //rule：即为校验规则对象
        //value：即为表单元素文本内容
        //函数：如果符合条件callback放行通过，反之则注入错误提示信息
        if (value.length >= 5) {
            callback();
        } else {
            callback(new Error('账号长度至少五位'));
        }
    }

    const validatorPassword = (rule: any, value: any, callback: any) => {
        if (value.length >= 6) {
            callback();
        } else {
            callback(new Error('密码长度至少六位'));
        }
    }

    //定义表单校验需要配置的对象
    const rules = {
        username: [
            // { required: true, message: '用户名不能为空', trigger: 'blur' },
            // { required: true, min: 5, max: 10, message: '账号长度至少五位', trigger: 'change' }
            { trigger: 'change', validator: validatorUserName }
        ],
        password: [
            // { required: true, min: 6, max: 15, message: '密码长度至少为六位', trigger: 'change' }
            { trigger: 'change', validator: validatorPassword }
        ]
    }

</script>

<style scoped lang="scss">
    .login_container {
        width: 100%;
        height: 100vh;
        background: url('@/assets/images/background.jpg') no-repeat;
        background-size: cover;

        .login_form {
            position: relative;
            width: 80%;
            top: 30vh;
            background: url('@/assets/images/login_form.png') no-repeat;
            background-size: cover;
            padding: 40px;

            h1 {
                color: white;
                font-size: 40px;
            }

            h2 {
                color: white;
                font-size: 20px;
                margin: 20px 0px;
            }

            .login_btn {
                width: 100%;
            }
        }
    }
</style>